<template>
<div class="nav-bar">
  <div class="nav-bar-left">
    <el-link :underline="false" :class="pathname == '/' ? 'active' : ''" href="/">
      首页
    </el-link>
    <el-link :underline="false" :class="pathname == '/dictionary' || pathname == '/word' ? 'active' : ''" href="/dictionary">
      学术字典
    </el-link>
    <el-link :underline="false" :class="pathname == '' ? 'active' : ''" href="/simpleRand">
      随机化
    </el-link>
  </div>
  <div class="nav-bar-right">
    <el-link :underline="false">
      <div class="help">帮助中心</div>
    </el-link>
    <el-link :underline="false">
      <div class="user-info">登录/注册</div>
    </el-link>
  </div>
</div>
</template>

<script lang="ts" setup>
const pathname = location.pathname
</script>
<style lang="scss" scoped>
.nav-bar{
  display: flex;
  justify-content: space-between;
  .nav-bar-left{
    display: flex;
    .el-link {
      margin-right: 10px;
    }
  }
  .nav-bar-right{
    display: flex;
    .el-link {
      margin-left: 10px;
    }
  }

  .el-link:hover {
    color: #1e80ff;
  }
  .active{
    color: #1e80ff;
  }
}
</style>
